import React from 'react';
import loadScript from 'scriptjs';

const { useState, useEffect } = React;

function SubAppLoader() {
    const [loaded, changeLoaded] = useState(false);
    // const [scripts, changeScripts] = useState([]);

    useEffect(() => {
        fetch('http://localhost:8081/manifest.json')
            .then(res => res.json())
            .then(data => {
                const scripts = [
                    data['manifest.js'],
                    data['vendor.js'],
                    data['app.js'],
                ];
                changeLoaded(true);
                loadScript(scripts);
            });
    }, []);

    return (
        <>
            {loaded
                ? <div id="subapp"></div>
                : <div>Loading...</div>}
        </>
    );
}

export default SubAppLoader;
